{% extends 'admin/base.html' %}

{% block content %}
    <h2 class="text-2xl font-bold mb-6">仪表盘</h2>

    <div class="grid grid-cols-4 gap-6 mb-8">
        <div class="p-6 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <span class="text-gray-500">总用户数</span>
                <i class="fas fa-users text-primary p-2 bg-primary/10 rounded-full"></i>
            </div>
            <div class="text-2xl font-bold">{{ count_users }}</div>
        </div>
        <div class="p-6 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <span class="text-gray-500">活跃用户</span>
                <i class="fas fa-user-check text-primary p-2 bg-secondary/10 rounded-full"></i>
            </div>
            <div class="text-2xl font-bold">{{ activated_user }}</div>
        </div>
        <div class="p-6 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <span class="text-gray-500">总推荐次数</span>
                <i class="fas fa-recycle text-blue-500 p-2 bg-blue-500/10 rounded-full"></i>
            </div>
            <div class="text-2xl font-bold">{{ total_recommends }}</div>
        </div>
        <div class="p-6 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <span class="text-gray-500">总浏览次数</span>
                <i class="fas fa-chart-line text-purple-500 p-2 bg-purple-500/10 rounded-full"></i>
            </div>
            <div class="text-2xl font-bold">{{ total_views }}</div>
        </div>
    </div>

    <div class="grid grid-cols-2 gap-6">
        <div class="chart-container p-6 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-medium">用户近期浏览次数统计</h3>
            </div>
            <div id="userChart" class="w-full h-[300px] relative"></div>
        </div>
        <div class="chart-container p-6 bg-white rounded-lg shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-medium">用户活跃统计</h3>
            </div>
            <div id="modelChart" class="w-full h-[300px] relative"></div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        const userChart = echarts.init(document.getElementById('userChart'));
        const modelChart = echarts.init(document.getElementById('modelChart'));

        const recentDate = {{ recent_date | tojson }};
        const recentData = {{ recent_data | tojson }};
        userChart.setOption({
            animation: false,
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: recentDate
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: recentData,
                type: 'bar',
                itemStyle: {
                    color: '#4F46E5'
                }
            }]
        });

        const count_users = {{ count_users }};
        const activated_user = {{ activated_user }};
        const not_activated_user = count_users - activated_user;
        modelChart.setOption({
            animation: false,
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [{
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: count_users, name: '总用户数', itemStyle: {color: '#4F46E5'}},
                    {value: activated_user, name: '活跃数', itemStyle: {color: '#10B981'}},
                    {value: not_activated_user, name: '不活跃数', itemStyle: {color: '#EF4444'}}
                ]
            }]
        });

        window.addEventListener('resize', function () {
            userChart.resize();
            modelChart.resize();
        });
    </script>
{% endblock %}